<!--<template>-->
<!--  <div class="page-wrap">-->
<!--    <Table filter v-bind="tableOpts" v-on="tableEvent">-->
<!--      <template #operator>-->
<!--        <div class="operator-wrap">-->
<!--          <modifyAftersale-->
<!--            v-if="authority.includes(296)"-->
<!--            ref="dialogRef"-->
<!--            @change="fetchCurrentTable"-->
<!--          />-->
<!--          <AfterSaleDetail ref="detailRef" @change="fetchCurrentTable" />-->
<!--          <updateAfter ref="updateAfterRef" @change="fetchCurrentTable" />-->
<!--        </div>-->
<!--      </template>-->
<!--    </Table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import tableMixins from "@/mixins/tableMixins.vue";-->
<!--import modifyAftersale from "./components/modifyAftersale.vue";-->
<!--import updateAfter from "./components/updateAfter.vue";-->
<!--import dayjs from "dayjs";-->
<!--import AfterSaleDetail from "./AfterSaleDetail.vue";-->
<!--export default {-->
<!--  name: "OrderAftersale",-->
<!--  mixins: [tableMixins],-->
<!--  components: {-->
<!--    AfterSaleDetail,-->
<!--    modifyAftersale,-->
<!--    updateAfter,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      apiName: "afterSaleList",-->
<!--      form: {-->
<!--        storeName: {-->
<!--          tag: "el-input",-->
<!--          label: "订单名称",-->
<!--          value: "",-->
<!--          props: {-->
<!--            clearable: true,-->
<!--            placeholder: "请输入订单名称",-->
<!--          },-->
<!--        },-->
<!--        status: {-->
<!--          tag: "el-select",-->
<!--          label: "状态",-->
<!--          value: -1,-->
<!--          items: [-->
<!--            { label: "全部", value: -1 },-->
<!--            { label: "未完成", value: 0 },-->
<!--            { label: "已完成", value: 1 },-->
<!--          ],-->
<!--          props: {},-->
<!--        },-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    authority() {-->
<!--      const { authority = [] } = this.$quinn.getStorage("userData") || {};-->
<!--      return authority || [];-->
<!--    },-->
<!--  },-->
<!--  methods: {-->
<!--    formatQuery(params) {-->
<!--      if (params.status == -1) delete params.status;-->
<!--      return params;-->
<!--    },-->
<!--    formatData(res) {-->
<!--      this.total = res?.total || 0;-->
<!--      this.dataSource = (res?.data || []).map((e) => {-->
<!--        if (e.updatedAt)-->
<!--          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");-->
<!--        if (e.createdAt) {-->
<!--          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");-->
<!--        }-->
<!--        return e;-->
<!--      });-->
<!--    },-->
<!--    handleAction(opts, row) {-->
<!--      const { id, orderId, storeName: name } = row;-->
<!--      let ref = null;-->
<!--      if (opts == "detail") ref = this.$refs.detailRef;-->
<!--      else if (opts == "delete")-->
<!--        this.showConfirm(`确认删除【${name}】？`, "newAfterSaleDelete", { id });-->
<!--      else if (opts == "done") ref = this.$refs.updateAfterRef;-->
<!--      ref && ref.showDialog(opts, row);-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style lang="less" scoped></style>-->

<template>
  <div class="page">
    <div class="topSearch" style="margin-bottom: 10px">
      <div style="text-align: center;">订单名称：
        <el-input placeholder="请按订单名称搜索" clearable v-model="params.storeName" size="small"
                  style="width: 200px;"></el-input>
      </div>
      <div style="text-align: center;margin-left: 20px">创建人：
        <el-input placeholder="请按创建人名称搜索" clearable v-model="params.createName" size="small"
                  style="width: 200px;"></el-input>
      </div>
      <div style="text-align: center;margin-left: 20px">状态：
        <el-select v-model="params.status" placeholder="请按订单状态搜索" size="small" style="width: 200px">
          <el-option value="" label="全部"></el-option>
          <el-option value="1" label="已完成"></el-option>
          <el-option value="0" label="未完成"></el-option>
        </el-select>
      </div>

      <div style="text-align: center;margin-left: 20px">区域：
        <el-select v-model="params.areaId" clearable placeholder="请按区域搜索" size="small" style="width: 180px">
          <el-option v-for="item in areaData" :key="item.area" :label="item.areaName" :value="item.area">
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center;margin-left: 20px">售后类型：
        <el-select clearable v-model="params.afterSaleTypeSelect" size='small'
                   style="width:200px" placeholder="请选择">
          <el-option v-for="item in SaleTypeData" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center;margin-top: 5px">创建时间： <el-date-picker
          v-model="sateValue"
          type="daterange"
          range-separator="至"
          clearable
          size="small"
          @change="selectTime"
          style="width: 200px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
      >
      </el-date-picker></div>
      <el-button size="small" type="primary" style="margin-top: 10px" @click="getList">查询</el-button>
      <el-button size="small" @click="reset" style="margin-top: 10px">重置</el-button>
      <el-button size="small" @click="addData" type="primary" style="position: absolute;top: 50px;right: 50px;width: 80px">新增售后
      </el-button>

    </div>
    <div class="centerList">
      <el-table :data="orderAftersaleData" border height="calc(100vh - 250px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                v-loading='loading'
                :headerCellStyle="{
'textAlign': 'center',
'fontWeight': 400,
'background': '#66b1ff',
'color': 'white',
}">
        <el-table-column prop="createdAt" label="创建时间" width="160px">
        </el-table-column>
        <el-table-column prop="picture" label="店铺名称" width="150px">
          <template slot-scope="scope">
            <div :style="{'color':scope.row.status===1 ? '#67C23A' : '#F56C6C'}">{{ scope.row.storeName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="仓库区域" width="80px"/>
        <el-table-column prop="remark" label="售后原因" width="230px"/>
        <el-table-column prop="afterSaleTypeText" label="售后类型" width="200px"/>
        <el-table-column prop="newAreaName" label="派遣仓库" width="80px"/>
        <el-table-column prop="deliveryDate" label="发货日期" width="100px"/>
        <el-table-column prop="address" label="发货地址" width="200px"/>
        <el-table-column prop="customPhone" label="客户联系方式" width="160px"/>
        <el-table-column prop="picture" label="售后图片" width="150px">
          <template slot-scope="scope">
            <!--              <span v-if="item.key === 'paymentVouchers'&&!['GD', , 'GX'].includes(userName)">-->
            <el-image v-for='(v, i) in scope.row.preSalesImg' :key="i" style="width: 50px; height: 50px"
                      ref="preview" :src="host+v" :preview-src-list="[host + v]">

            </el-image>
            <!--              </span>-->
            <!--            <span v-else>{{ scope.row[item.key] }}</span>-->
          </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建人" width="160px">
        </el-table-column>
        <el-table-column prop="deliveryInfo" label="收货信息" width="230px"/>
        <el-table-column prop="openTime" label="开业时间" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.openTime }}</span>
            <span style="color: #e6a23c" v-if="!scope.row.openTime&&scope.row.isOpen==1">待定</span>
            <span style="color: #13ce66" v-if="!scope.row.openTime&&scope.row.isOpen==0">已开业</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeType" label="店铺类型" width="120px"/>
        <el-table-column prop="billingMethod" label="快递结算" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.billingMethod==1">寄付</span>
            <span v-if="scope.row.billingMethod==2">到付</span>
          </template>
        </el-table-column>
        <el-table-column prop="afterSales" label="售后人员" width="80px"/>
        <el-table-column prop="finishRemark" label="售后完结备注" width="200px"/>
        <el-table-column prop="picture" label="完结凭证" width="150px">
          <template slot-scope="scope">
            <!--              <span v-if="item.key === 'paymentVouchers'&&!['GD', , 'GX'].includes(userName)">-->
            <el-image v-for='(v, i) in scope.row.finishImg' :key="i" style="width: 50px; height: 50px"
                      ref="preview" :src="host+v" :preview-src-list="['https://'+v]">

            </el-image>
            <!--              </span>-->
            <!--            <span v-else>{{ scope.row[item.key] }}</span>-->
          </template>
        </el-table-column>
        <el-table-column prop="confirmTime" label="完结时间" width="150px"/>
        <el-table-column label="状态" width="120px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1">完成</el-tag>
            <el-tag v-if="scope.row.status===0">未完成</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px" fixed="right">
          <template slot-scope="scope">
            <el-link type="success" style="margin-right: 20px" @click="confirmDialog(scope.row)"
                     v-if="scope.row.status===0 && authority.includes(295)">确认完成
            </el-link>
            <el-link type="info" style="margin-right: 20px" @click="infoDetail(scope.row)">产品详情</el-link>
            <el-link type="danger" @click="deleteInfo(scope.row)"
                     v-if="scope.row.status ===0 && authority.includes(179)">删除
            </el-link>
            <el-link type="primary" @click="editDialog(scope.row)"
                     v-if="scope.row.status ===0 && authority.includes(213)" style="margin-left: 20px">编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>

    </div>
    <div class="dialogBar">
      <!--      填写售后信息弹窗-->
      <el-dialog :close-on-click-modal="false" :visible.sync="afterSaleInfo" width="30%" title="填写售后信息"
                 v-if="afterSaleInfo">
        <!--        <div style="display: flex;align-items: center">-->
        <!--          <div style="width:80px;text-align: center;">售后人员：</div>-->
        <!--          <el-input placeholder="请填写售后人员姓名" v-model="orderInfo.afterSales" size="small" style="width: 80%"></el-input>-->
        <!--        </div>-->
        <div style="display: flex;align-items: center">
          <div style="width:80px;text-align: center;">完结备注：</div>
          <el-input type="textarea" v-model="orderInfo.finishRemark" size="small" style="width: 80%"></el-input>
        </div>
        <div style="width:80px;text-align: center;margin-top: 15px">凭证：</div>
        <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>
        <div class="div" style="display: flex;align-items: center">


          <div v-for='(v, i) in finishImg' style="display: flex;align-items: center;margin-right: 10px;">
            <el-image :key="i" style="width: 50px; height: 50px"
                      ref="preview" :src="host+v" :preview-src-list="[host + v]">
            </el-image>
            <div @click="deletePic(i)">
              <el-icon name="delete"></el-icon>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="afterSaleInfo = false">取 消</el-button>
    <el-button type="primary" @click="confirmInfo">确 定</el-button>
  </span>
      </el-dialog>
      <!--      产品详情弹窗-->
      <el-dialog :close-on-click-modal="false" :visible.sync="detailInfo" title="产品详情" width="80%">
        <el-button type="primary" size="small" style="margin-bottom: 15px;float: right" @click="exportTable">导出
        </el-button>
        <el-table :data="detailData.detailData" border height="600px"
                  v-loading="detailLoading"
                  :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                  :headerCellStyle="{
              textAlign: 'center',
            }">
          <el-table-column type="index" label="序号"/>
          <el-table-column prop="id" label="产品ID"/>
          <!--          <el-table-column prop="warehousePosition" label="库位"/>-->
          <el-table-column prop="productCode" label="产品编码"/>
          <el-table-column prop="productName" label="产品名称"/>
          <el-table-column prop="norms" label="规格"/>
          <el-table-column prop="unit" label="单位"/>
          <el-table-column prop="colour" label="颜色"/>
          <el-table-column prop="count" label="数量"/>

        </el-table>
      </el-dialog>
      <!--新增售后信息弹窗-->
      <el-dialog :close-on-click-modal="false" :visible.sync="addInfo" center :title="title" width="60%" top="10px">
        <div style="display: flex;align-items: center;margin-bottom: 30px;">
          <div style="width:80px;text-align: center;"><span style="color:red;">*</span>订单名称：</div>
          <el-select filterable remote :remote-method="inputChange" value-key="orderId"
                     @change="changeSaleName" clearable v-model="addForm.testId" size='small'
                     style="width:80%" placeholder="请选择" >
            <el-option v-for="item in saleNameList" :key="item.orderId" :label="item.storeName" :value="item">
            </el-option>
          </el-select>
        </div>
        <div style="display: flex;align-items: center;margin-bottom: 30px">
          <div style="width:80px;text-align: center;"><span style="color:red;">*</span>发货时间：</div>
          <el-date-picker
              v-model="addForm.deliveryDate"
              disabled
              type="date"
              size="small"
              style="width: 80%"
              placeholder="选择日期">
          </el-date-picker>
        </div>
        <div style="display: flex;align-items: center;margin-bottom: 30px">
          <div style="width:80px;text-align: center;"><span style="color:red;">*</span>安装时间：</div>
          <el-date-picker
              v-model="addForm.installDate"
              type="date"
              disabled
              style="width: 80%;"
              size="small"
              placeholder="选择日期">
          </el-date-picker>
        </div>
        <div style="display: flex;align-items: center">
          <div style="width:80px;text-align: center;"><span style="color:red;">*</span>售后类型：</div>
          <el-select clearable multiple v-model="addForm.afterSaleType" size='small'
                     style="width:80%" placeholder="请选择">
            <el-option v-for="item in SaleTypeData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="display: flex;align-items: center;margin-top: 30px">
          <div style="width:80px;text-align: center;"><span style="color:red;">*</span>处理方式：</div>
          <el-select clearable v-model="addForm.handleMode" size='small'
                     style="width:80%" placeholder="请选择">
            <el-option v-for="item in handleType" :key="item.value" :label="item.name" :value='item.value'/>


          </el-select>
        </div>
        <div style="display: flex;align-items: center" id="photos">
          <div style="width:80px;text-align: center;margin-top: 30px">售后图片：</div>
          <div>
            <span style="color:gray;font-size: 12px;">(粘贴复制即可上传图片)</span>
            <div class="div" style="display: flex;align-items: center">


              <div v-for='(v, i) in preSalesImg' style="display: flex;align-items: center;margin-right: 10px;">
                <el-image :key="i" style="width: 50px; height: 50px"
                          ref="preview" :src="host+v" :preview-src-list="[host + v]">
                </el-image>
                <div @click="deletePic(i)">
                  <el-icon name="delete"></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;align-items: center;margin-top: 30px">
          <div style="width:80px;text-align: center;">售后原因：</div>
          <el-input type="textarea" v-model="addForm.remark" style="width: 80%"></el-input>
        </div>
        <div style="display: flex;align-items: center;margin-top: 10px">
          <div style="width:80px;text-align: center;">运费结算：</div>
          <el-select clearable v-model="addForm.billingMethod" size='small'
                     style="width:80%" placeholder="请选择">
            <el-option v-for="item in deliveryData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div style="display: flex;align-items: center;margin-top: 10px">
          <div style="width:80px;text-align: center;">店铺信息：</div>
          <el-input size="small" v-model="addForm.storeType" style="width: 80%"></el-input>
        </div>
        <div style="display: flex;align-items: center;margin-top: 10px">
          <div style="width:80px;text-align: center;">开业时间：</div>
          <el-date-picker
              v-model="addForm.openTime"
              type="date"
              style="width: 80%;"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              placeholder="选择日期">
          </el-date-picker>
        </div>
        <div style="display: flex;align-items: center;margin-top: 30px">
          <div style="width:80px;text-align: center;">收货信息：</div>
          <el-input type="textarea" v-model="addForm.deliveryInfo" style="width: 80%"></el-input>
        </div>

        <div style="width:80px;text-align: center;margin-top:20px">产品：</div>
        <el-button size="small" type="primary" style="margin: 0 80px 5px 80px;"
                   @click="pushProduceList">增加产品
        </el-button>

        <div style="display: flex;align-items: center;margin-top: 10px" v-for="(item,index) in addForm.addMaterialsList"
             :key="'addMaterialsList'+index">
          <el-select v-model="item.id" remote @change="changeProduceName" filterable :remote-method="changeProduce"
                     placeholder="请选择" style="width: 350px;margin-left: 80px" size="small">
            <el-option v-for="item in produceList" :key="item.materialId"
                       :value="item.materialId"
                       :label="item.productName">
            </el-option>
          </el-select>
          <el-input-number style="margin-left:10px" v-model="item.count" @change="handleChange" :min="0"
                           size="small"></el-input-number>
          <el-link style="font-size: 12px;width: 80px"
                   @click="deleteProduce(addForm.addMaterialsList,index)">删除
          </el-link>
        </div>

        <div style="display: flex;align-items: center;margin-top: 30px" v-if="title=='编辑售后信息'">
          <div style="width:80px;text-align: center;">派遣仓库：</div>
          <el-select v-model="addForm.newArea" clearable placeholder="请按区域搜索" size="small" style="width: 180px" @change="changeNewArea">
            <el-option v-for="item in areaData" :key="item.area" :label="item.areaName" :value="item.area">
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addInfo = false">取 消</el-button>
    <el-button type="primary" @click="addAfterInfo">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>


</template>
<script>
import dayjs from 'dayjs';
import upload from "@/RayComponents/upload.vue";
import axios from 'axios';
import quinn from '../../utils/quinn';

import {toArray} from 'lodash';
import * as XLSX from 'xlsx-js-style';
import store from "../../store";

export default {
  components: {
    upload,
  },
  data() {
    return {
      submitType: "",
      host: this.$imgHost,
      preSalesImg: [],
      sateValue: "",
      params: {
        pageSize: 20,
        pageNumber: 1,
        storeName: "",
        createName: "",
        status: "",
        startTime: "",
        endTime: "",
      },
      deliveryData:
          [{value: 1, label: "寄付"}, {value: 2, label: "到付"}],
      handleType: [{
        value: 1,
        name: "上门处理"
      }, {
        value: 2,
        name: "补发"
      }, {
        value: 3,
        name: "上门+补发"
      }],
      produceList: [],
      areaId: "",
      previewImg: [],
      finishImg: [],
      preSalesImgList: [],
      finishImgList: [],
      addInfo: false,
      afterVoucherClearImgUrl: false,
      areaData: [],
      orderAftersaleData: [],
      detailLoading: false,
      detailData: [],
      detailInfo: false,
      proId: "",
      loading: false,
      currentPage: 1,
      addForm: {
        addMaterialsList: [],
      },
      SaleTypeData: [],
      totalCount: 0,
      saleNameList: [],
      afterSaleType: [],
      afterSaleInfo: false,
      title: "",
      authority: [],
      orderInfo: {
        id: "",
        orderId: "",
        area: "",
        finishRemark: "",
        // afterSales: ""
      }
    }
  },
  created() {
    const {authority = []} = quinn.getStorage("userData") || {};
    this.authority = authority;
    this.getList();
    this.areaList()
    this.getTypeList()
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    areaList() {
      this.$api.areaLedgerAreaList().then(res => {
        this.areaData = res
      })
    },
    reset() {
      this.params.storeName = ''
      this.params.status = ''
      this.params.pageSize = 20
      this.params.pageNumber = 1
      this.params.areaId = ""
      this.params.startTime = ""
      this.params.endTime = ""
      this.currentPage = 1
      this.sateValue = ""

    },
    getTypeList() {
      this.$api.newAfterSaleTypesEnum().then(res => {
        this.SaleTypeData = res
      })
    },
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format("YYYY-MM-DD");
        this.params.endTime = dayjs(val[1]).format("YYYY-MM-DD");
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    getList() {
      this.loading = true
      const params = this.params
      this.$api.afterSaleList(params).then(res => {
        this.loading = false;
        res.data.forEach(el => {
          el.createdAt = dayjs(el.createdAt).format("YYYY-MM-DD HH:mm:ss")
          if (el.preSalesImg) {
            el.preSalesImg.forEach(e => {
              this.previewImg.push('https://' + e)
            })
          }
        })
        this.orderAftersaleData = res.data
        this.totalCount = res.total
      })

    },
    // changeAfterSale(event, row, index) {
    //   console.log(row)
    //   console.log(event, "发生")
    //   const data={
    //     id:row.id,
    //     status:event
    //   }
    // },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList(this.params)
    },
    exportTable() {
      const wb = XLSX.utils.book_new();
      let data = [
        [this.detailData.storeName + "(店铺类型：" + (this.detailData.storeType || '无') + ')'],
        [`仓库:${this.detailData.areaName}`, "", `发货日期:${this.detailData.deliveryDate}`],
        [`客户:${this.detailData.customPhone}`, '', `地址:${this.detailData.address}`, ''],
        [`售后人员:${this.detailData.createName}`, '', `创建时间:${this.detailData.createdAt}`],
        [`开业日期:${(this.detailData.openTime || '待定')}`, '', `快递结算:${this.detailData.billingName}`],
        [`售后原因:${this.detailData.remark}`],
        ['产品编码', '产品名称', '规格', '单位', '颜色', '数量']]
      this.detailData.detailData.map(el => {
        data.push([el.productCode, el.productName, el.norms, el.unit, el.colour, el.count])
      })
      // data[data.length + 1] = [info.storeName,`实付:${info.totalDisCount}`,`补贴:${info.totalDiffPrice}`,`总价:${info.totalAmount}`];
      const ws = XLSX.utils.aoa_to_sheet(data);
      ws['!cols'] = [
        {wpx: 100}, // 第一列宽度为100单位
        {wpx: 150},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100},
        {wpx: 100}
      ];
      ws["A1"].s = {
        alignment: {horizontal: 'center'},
        font: {blod: true, color: {rgb: '000000'}},
        fill: {fgColor: {rgb: 'ff6a00'}}
      }
      ws["A1"].hpt = 140;
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      ws['!merges'] = [
        {s: {r: 0, c: 0}, e: {r: 0, c: 6}},
        {s: {r: 1, c: 0}, e: {r: 1, c: 1}},
        {s: {r: 1, c: 2}, e: {r: 1, c: 6}},
        {s: {r: 2, c: 0}, e: {r: 2, c: 1}},
        {s: {r: 2, c: 2}, e: {r: 2, c: 6}},
        {s: {r: 3, c: 0}, e: {r: 3, c: 1}},
        {s: {r: 3, c: 2}, e: {r: 3, c: 6}},
        {s: {r: 4, c: 0}, e: {r: 4, c: 1}},
        {s: {r: 4, c: 2}, e: {r: 4, c: 6}},
        {s: {r: 5, c: 0}, e: {r: 5, c: 6}},
      ]
      const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'});
      // 创建一个 Blob 对象
      const blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});
      // 使用 Blob 对象创建一个链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `${this.detailData.storeName}.xlsx`;

      // 触发下载
      link.click();

      // 清理
      URL.revokeObjectURL(link.href);

      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
    },
    confirmDialog(val) {
      this.orderInfo.id = val.id
      this.orderInfo.area = val.area
      // this.orderInfo.creator = val.creator
      this.orderInfo.orderId = val.orderId
      this.afterSaleInfo = true
      this.finishImg = []
      this.finishImgList = []
    },
    confirmInfo() {
      const data = {
        ...
            this.orderInfo,
        status: 1,
        finishImg: this.finishImg
      }
      console.log(data, "data")
      this.$api.newAfterSaleUpdate(data).then(res => {
            this.$message({
              type: 'success',
              message: "提交成功！"
            }),
                this.afterSaleInfo = false;
            this.getList()
          }
      )
    },
    //删除
    deleteInfo(val) {
      const data = {
        id: val.id
      }
      this.$confirm('确认删除？')
          .then(_ => {
            this.$api.newAfterSaleDelete(data).then(res => {
              this.$message({
                type: 'success',
                message: "删除成功！"
              }),
                  this.getList();
            })
          })
          .catch(_ => {
            return
          });
    },
    // 产品详情
    infoDetail(val) {
      this.detailInfo = true
      this.detailLoading = true
      const params = {
        id: val.id,
        pageNumber: 1,
        pageSize: 1000000,
      }
      this.$api.newAfterSaleMaterials(params).then(res => {
        this.detailData = {
          ...val,
          detailData: res.data
        }
        console.log(this.detailData, '1')
      })
      this.detailLoading = false
    },
    //新增弹窗
    addData() {
      this.areaId =""
      this.addForm = this.$options.data.call(this).addForm
      this.preSalesImg = this.$options.data.call(this).preSalesImg
      this.submitType = 1
      this.addInfo = true
      this.title = "新增售后信息"
      this.produceList = []
      this.afterVoucherClearImgUrl = false
    },
    inputChange(val) {
      if (val) {
        const params = {
          storeName: val
        }
        this.$api.orderGetOrderInfoLikeName(params).then(res => {
          this.saleNameList = res
        })
      }
    },
    //切换派遣仓库
    changeNewArea(val){
      this.newArea=val
      // this.addForm.addMaterialsList=[]
      // this.produceList=[]
    },
    changeSaleName(item) {
      this.areaId = item.areaId
      this.addForm.orderName = item.storeName
      this.addForm.orderId = item.orderId
      this.addForm.testId = item.storeName
      this.addForm.deliveryDate = item.deliveryDate
      this.addForm.installDate = item.installDate
    },
    getImageUrl(e) {
      this.addForm.afterSaleVoucher = e.join(',')
    },
    changeProduce(val) {
      if (!(this.areaId||this.newArea)) return this.$message({message: '请先填写订单！', type: 'warning'})
      if(this.newArea){
        const params = {
          productName: val,
          areaId: this.newArea
        }
        this.$api.materialGetMaterialInfoLikeName(params).then(res => {
          this.produceList = res
        })
      }else{
        const params = {
          productName: val,
          areaId: this.areaId
        }
        this.$api.materialGetMaterialInfoLikeName(params).then(res => {
          this.produceList = res
        })
      }

    },
    handleChange() {

    },
    pushProduceList() {
      this.addForm.addMaterialsList = [...this.addForm.addMaterialsList, {
        norms: "",
        count: 0
      }]
    },
    deleteProduce(list, index) {
      list.splice(index, 1)
    },
    addAfterInfo() {
      if (!this.addForm.testId) {
        this.$message.error('请选择关联订单!');
        return
      } else if (!this.addForm.afterSaleType) {
        this.$message.error('请选择售后类型!');
        return
      } else if (!this.addForm.handleMode) {
        this.$message.error('请选择处理方式!');
        return
      }
      const data = {
        ...
            this.addForm,
        preSalesImg: this.preSalesImg
      }
      if (data.addMaterialsList.length > 0) {
        for (let i in data.addMaterialsList) {
          if (data.addMaterialsList[i].count == 0 || !data.addMaterialsList[i].id) {
            this.$message({message: "请选择产品及数量！"});
            return
          }
        }
      }
      if (this.submitType === 1) {
        this.$api.afterSaleAfterSaleAdd(data).then(res => {
          this.addInfo = false
          this.$message({message: "提交成功！", type: 'success'})
          this.getList()
        })
      } else if (this.submitType === 2) {
        this.$api.afterSaleUpdateAfterSaleInfo(data).then(res => {
          this.addInfo = false
          this.$message({message: "提交成功！", type: 'success'})
          this.getList()
        })
      }
    },

    imageList(e) {
      this.preSalesImg.push(e);

    },
    handlePaste(event) {
      if (!(this.addInfo || this.afterSaleInfo)) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      if (imageFile.size > 5000000) return this.$message.warning('图片大于5MB，请压缩后上传！')
      axios.post(`${this.$apiHost}/common/fileImgUrl`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': store.state.token
        }
      })
          .then(response => {
            this.preSalesImg.push(response.data.result[0]);
            this.finishImg.push(response.data.result[0]);
            // this.preSalesImgList.push('https://' + response.data.result[0]);
            // this.finishImgList.push('https://' + response.data.result[0]);
          })
          .catch(error => {
          });
    },
    editDialog(row) {
      console.log(row)
      this.submitType = 2
      this.title = "编辑售后信息"
      this.areaId = row.area
      this.preSalesImg = this.$options.data.call(this).preSalesImg
      this.addInfo = true
      this.produceList = []
      if (row.materials) {
        row.addMaterialsList.forEach(el => {
          const val = el.productName.split("")[0]
          const areaId = row.area
          this.changeProduce(val, areaId)
        })
      }
      this.addForm = row
      this.addForm.orderId = row.orderId
      this.addForm.testId = row.storeName
      if (row.newArea) {
        this.addForm.newArea = row.newArea
        this.newArea=row.newArea
      } else {
        this.addForm.newArea = row.area
        this.newArea=row.area
      }
      this.addForm.afterSaleType = row.afterSaleTypeStr.split(',')
      this.addForm.addMaterialsList = row.addMaterialsList
      if (row.preSalesImg) {
        row.preSalesImg.forEach(el => {
          this.preSalesImgList.push(this.host + el)
        })
        this.preSalesImg = row.preSalesImg
      }
    },
    changeProduceName() {

    },
    deletePic(i) {
      this.preSalesImg.splice(i, 1)
      this.finishImg.splice(i, 1)

    }
  }
}


</script>
<style lang="less" scoped>
.topSearch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  div{
    width: calc((100% - 20px) / 6);
  }
}
.page{
  overflow: scroll;
}
</style>
